<template>
    <div style="width: 100%;height: 100%">
        <el-container style="background: #fff;border-radius: 10px;height: 100%;">
            <el-header style="padding: 0;height: 53px">
                <div class="flex-row" style="justify-content: space-between;border-bottom: .5px solid #d9d9d9;padding: 0 20px;
height: 100%">
                    <div class="flex-row">
                        <span class="iconfont icon-fanhui cursor-pointer" style="font-size: 22px"></span>
                        <div style="margin: 0 10px">|</div>
                        <div style="font-size: 14px">{{ title }}</div>
                    </div>
                    <div class="top-nav">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="问卷编辑" name="问卷编辑"></el-tab-pane>
<!--                            <el-tab-pane label="项目设置" name="项目设置"></el-tab-pane>-->
<!--                            <el-tab-pane label="发布分享" name="发布分享"></el-tab-pane>-->
<!--                            <el-tab-pane label="数据统计" name="数据统计"></el-tab-pane>-->
                        </el-tabs>
                    </div>
                    <div>
                        <span class="iconfont icon-bangzhu cursor-pointer font-color-main"
                              style="font-size: 22px"></span>
                    </div>
                </div>
            </el-header>
            <el-main style="padding: 0">
                <div style="height: 42px;justify-content: space-between;padding: 5px 10px"
                     class="main-boyd-nav flex-row">
                    <div class="flex-row" v-if="activeName == '问卷编辑'">
                        <div v-for="(item,index) in decpTitle" :key="index" style="font-size: 12px"
                             class="box-nav-title cursor-pointer"
                             @click="toggleDecp(item)" :class="[decpActiveTitle == item ? 'box-nav-title-active' : '']"
                        >{{ item }}
                        </div>
                    </div>
                    <div v-if="activeName == '问卷编辑'">
                        <el-button  size="mini" @click="saveScameJson"
                        type="primary">保存</el-button>
                        <el-button type="success" size="mini" @click="openJsonTree">结构解析</el-button>
                        <el-button type="warning" size="mini" @click="viewFormJson">预览</el-button>
                    </div>
                </div>
                <div style="height: calc(100% - 42px);" class="flex-row" v-if="activeName == '问卷编辑'">
                    <div style="width: 300px;height: 100%">
                        <TitleTi v-if="decpActiveTitle == '题目'"></TitleTi>
                    </div>
                    <div style="flex: 1;height: 100%;position: relative" class="drop-main">
                        <DragMainCont v-if="decpActiveTitle == '题目'" @throwId="getThrowId"
                                      @throwContWig="getContRow"></DragMainCont>
                    </div>
                    <div style="width: 350px;height: 100%">
                        <formPropsOptions v-if="decpActiveTitle == '题目'"
                                          :selfId="selfId" :prentId="prentId"
                                          ref="refFormPropsOptions"></formPropsOptions>
                    </div>
                </div>
            </el-main>
        </el-container>
        <el-dialog
            v-if="dialogVisible"
            title="组件事件处理"
            :visible.sync="dialogVisible"
            width="50%"
            class="small-padding-dialog"
            :append-to-body="true"
        >
            <codeEditor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode"
                        ref="ecEditor"></codeEditor>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">
                    取消</el-button>
            </div>
        </el-dialog>


        <el-dialog
            v-if="dialogFormVisible"
            title="问卷预览"
            :visible.sync="dialogFormVisible"
            width="50%"
            class="small-padding-dialog"
            :append-to-body="true"
        >

            <wenjuanRender ref="refFormRender"></wenjuanRender>
            <div slot="footer" class="dialog-footer">
                <el-button @click="getUserValue">
                    获取数据</el-button>
                <el-button @click="dialogFormVisible = false">
                    取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TitleTi from "@/components/left-toggle-content/title-ti/index.vue";
import DragMainCont from "@/components/center-toggle-content/drag-main-cont/index.vue";
import formPropsOptions from '@/components/right-toggle-content/form-props-options/index.vue'
import {containerConfigList, formGlobalConf,setContainerConfigList,setFormGlobalConf} from "@/components/form-designer/container-panel/containerConfig";
import codeEditor from "@/components/code-editor/index.vue";
import wenjuanRender from "@/components/form-render/wenjuanRender.vue";
import {uuid} from "vue-uuid";
export default {
    name: 'mainContain',
    components: {
        codeEditor,
        TitleTi,
        DragMainCont,
        formPropsOptions,
        wenjuanRender
    },
    provide(){
        return {
            lastWenJson:this.lastWenJson,
        }
    },
    props: {
        title: {
            type: String,
            default: '问卷设计',
        },
        lastWenJson:{
            type: String,
            default:'',
        }
    },
    data() {
        return {
            activeName: '问卷编辑',
            // '逻辑','指标'
            // '主题'
            decpTitle: ['题目', ],
            decpActiveTitle: '题目',
            dialogVisible:false,
            eventHandlerCode:'',
            dialogFormVisible:false,
            selfId: '',
            prentId: '',
        }
    },
    methods: {
        setWenjuanJSON(json){
            let paseJson = json
            if(!paseJson){
                paseJson = {
                    containerConfigList:[
                        {
                            title:'默认问题组',
                            isExpand:false,
                            isHover:false,
                            isClick:false,
                            isSole:true,
                            id:uuid.v4(),
                            widgetList:[],
                            sortTitle:'1',//排序序号
                            itemTotalSource:0,
                            parentWeight:0,
                            isPrentAndChildSort:true,//是否参与父级容器和子项排序
                            isChildSort:true,//是否开启子项排序
                        }
                    ],
                    formGlobalConf:{
                        topTitle:'问卷标题',//顶部标题
                        titleTip:'您好！感谢您参与此次调研，本次访问大约需要占用您3到5分钟时间。您的观点对我们非常重要。您的回答无所谓对与错，仅代表您的个人看法，请您认真作答，谢谢！',//标题说明
                        isTotalSource:true, //是否开启打分
                        totalSource:100,
                        globalWeight:100,
                        gaishanfenzhanbi:50,
                        fuwufenzhanbi:50,
                        isTimeRestriction:false, //是否开启时间限制
                        actionStartTime:'',
                        actionEndTime:'',
                    }
                }
                paseJson = JSON.stringify(paseJson)
            }
            const value = JSON.parse(paseJson)
            setContainerConfigList(value.containerConfigList)
            setFormGlobalConf(value.formGlobalConf)
            this.$forceUpdate()
        },
        handleClick(tabName) {

        },
        toggleDecp(name) {
            this.decpActiveTitle = name
        },
        getThrowId(selfId, prentId) {
            this.selfId = selfId
            this.prentId = prentId
            this.$nextTick(() => {
                this.$refs.refFormPropsOptions.getCompOptions(selfId, prentId)
            })
        },
        getContRow(row) {
            this.$nextTick(() => {
                this.$refs.refFormPropsOptions.getParentCont(row)
            })
        },
        saveScameJson() {
            this.$emit('throwWenJuanJSON',{
                containerConfigList,
                formGlobalConf,
            })
        },
        openJsonTree(){
            this.eventHandlerCode = JSON.stringify({
                containerConfigList,
                formGlobalConf
            },null,4)
            this.$nextTick(()=>{
                this.dialogVisible = true
            })
        },

        viewFormJson(){
            this.dialogFormVisible = true
            this.$nextTick(()=>{
                this.$refs.refFormRender.setFormJson('','xiezuo')
            })
        },
        getUserValue(){
            console.log(this.$refs.refFormRender.throwGlobalRenValue())
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-tabs__header {
  margin: 0;
}

::v-deep .top-nav .el-tabs__nav {
  height: 52px;
}

.main-boyd-nav {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.box-nav-title {
  color: #000;
  line-height: 25px;
  height: 25px;
  text-align: center;
  padding: 0 10px;
}

.box-nav-title-active {
  background: #00c29a1a;
  color: #409eff;
}

.drop-main {
  padding: 20px;
  background: #f3f5f6;
}

</style>
